{% extends 'common/panel.html' %}
{% block title %}{{instance.name}}{% endblock title %}
{% block panel %}

<script type="text/javascript" charset="utf-8">
    madrona.onShow(function(){
        onChart = false;
        var folder_id = {{instance.pk}};
        $('#Tradeoff_Analysis').hide();
        $('#change_objectives').hide();
        $('#toggle_legend').hide();
        
        $('#chart_button').click( function(event) {
        
            selected_smps = $("input:checkbox[name='smps']:checked");
            smps = [];
            $.each(selected_smps, function() {
                smps.push( $(this).val() );
            });
            selected_aois = $("input:checkbox[name='aois']:checked");
            aois = [];
            $.each(selected_aois, function() {
                aois.push( $(this).val() );
            });
            if (smps.length > 0 || aois.length > 0) {
                if (onChart) {
                    $('#show_chart').click();
                }
            } else {
                alert('You must select at least one shape to view analysis.');
                $('#intro_button').click();
            }
        });
        
        $('#show_chart').click( function(event) { 
            var selected_x = $('input[name=x-axis]:checked').val();
            var selected_y = $('input[name=y-axis]:checked').val();
                        
            $.post('general/tradeoff/show-analysis', {'folder_id': folder_id, 'selected_x': selected_x, 'selected_y': selected_y, 'smps': smps, 'aois': aois}, function(data) {
                $('#Tradeoff_Analysis').html(data);
            });
            $('#Tradeoff_Instructions').hide();
            $('#Tradeoff_Analysis').show();
            $('#show_chart').hide();
            $('#change_objectives').show();
            $('#toggle_legend').show();
            onChart = true;
            
        });
        
        $('#change_objectives').click( function(event) {    
            $('#Tradeoff_Analysis').hide();
            $('#Tradeoff_Instructions').show();
            $('#change_objectives').hide();
            $('#toggle_legend').hide();
            $('#show_chart').show();
            onChart = false;
        });
        
        $('#table_button').click( function(event) {
            selected_smps = $("input:checkbox[name='smps']:checked");
            smps = [];
            $.each(selected_smps, function() {
                smps.push( $(this).val() );
            });
            selected_aois = $("input:checkbox[name='aois']:checked");
            aois = [];
            $.each(selected_aois, function() {
                aois.push( $(this).val() );
            });
            if (smps.length > 0 || aois.length > 0) {
                $.post('general/tradeoff/show-table', {'folder_id': folder_id, 'smps': smps, 'aois': aois}, function(data) {
                    $('#Tradeoff_Table').html(data);
                });
            } else {
                alert('You must select at least one shape to view analysis.');
                $('#intro_button').click();
            }
        });
            

    });    

    function toggleDiv(divId, srcId) {
        $("#"+divId).toggle();
        if ($("#"+srcId).text() == 'How were my shapes scored?') { 
            $("#"+srcId).text('Hide Text'); 
        } else if ($("#"+srcId).text() == 'Hide Text') { 
            $("#"+srcId).text('How were my shapes scored?'); 
        }
    }
</script>

<h1>
    <img src="/media/wmm/img/analysis.png"/>
    <small><small>Tradeoff Collection </small></small> 
    &nbsp;&nbsp;{{instance.name}}
</h1>
    <div class="tabs">
        <ul>
            <li><a href="#Inputs"><span>Attributes</span></a></li>
            <li><a href="#results"><span>Multi-Objective Tradeoffs</span></a></li>
        </ul>
        <div id="Inputs">
            <ul class="metadata">
              {% if instance.user.first_name and instance.user.last_name %} 
                <li class="creator">Created By {{instance.user.first_name}} {{instance.user.last_name}}</li>
              {% else %}
                <li class="creator">Created By {{instance.user.username}}</li>
              {% endif %}
                <li class="created">Created {{instance.date_created|date:"d M, Y P"}}</li>
                <li class="modified">Modified {{instance.date_modified|date:"d M, Y P"}}</li>
                <br class="clear" />
            </ul>
            
            <h2>Contents</h2>
            
                {% if instance.num_smps > 0 %}
                <p style="margin-bottom:0px">SMP Characterization Sites: 
                {% for smp in instance.smp_set %}
                <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{smp.name}}</p>
                {% endfor %}
                {% endif %}
                
                {% if instance.num_aois > 0 %}
                <p style="margin-bottom:0px">Areas of Interest: 
                {% for aoi in instance.aoi_set %}
                <p style="margin-left:25px;margin-top:0px;margin-bottom:0px;">{{aoi.name}}</p>
                {% endfor %}
                {% endif %}
                
                {% if instance.num_features == 0 %}
                <p><i>Currently empty</i></p>
                {% endif %}
            
            <h2>Description</h2>
                {% if instance.description %}
                <p>{{instance.description}}</p>
                {% else %}
                <p><i>No Description</i></p>
                {% endif %}
            
            <h2>Hint</h2>
            <div class="draghint">
                <img src="{{MEDIA_URL}}wmm/img/analysis_dragdrophint.png" />
                To add Areas and/or SMP Sites to this collection, simply drag and drop features in and out of it from the sidebar after saving.
                <br style="clear:both;" />
            </div>
        </div>
        
        <div id="results" class="tabs">
        {% if instance.num_aois > 0  or instance.num_smps > 0 %}
            <ul>
                <li><a id="intro_button" href="#introduction"><span>Introduction</span></a></li>
                <li><a id="chart_button" href="#visual"><span>Chart</span></a></li>
                <li><a id="table_button" href="#text"><span>Table</span></a></li>
            </ul>
            
            <div id="introduction" class="box">
                <p>The multi-objective tradeoffs reports help you compare the conservation and renewable energy scores for your shapes.
                <p>Select the shapes you would like to include in the report:
                <table>
                    <tr>
                        {% if instance.num_aois > 0 and instance.num_smps > 0 %}
                            <td class="intro-40-column" align="right">
                                <label class="header">Areas of Interest:</label>
                            </td>
                            <td class="intro-middle-column">
                                &nbsp;
                            </td>
                            <td class="intro-40-column" align="right">
                                <label class="header">SMP Characterization Sites:</label>
                            </td>
                            <td class="right-column">
                                &nbsp;
                            </td>
                        {% else %}
                            {% if instance.num_aois > 0 %}
                            <td class="intro-80-column" align="right">
                                <label class="header">Areas of Interest:</label>
                            </td>
                            <td class="intro-middle-column">
                                &nbsp;
                            </td>
                            {% endif %}
                            {% if instance.num_smps > 0 %}
                            <td class="intro-80-column" align="right">
                                <label class="header">SMP Characterization Sites:</label>
                            </td>
                            <td class="right-column">
                                &nbsp;
                            </td>
                            {% endif %}
                        {% endif %}
                    </tr>
                    <tr>
                        {% if instance.num_aois > 0 and instance.num_smps > 0 %}
                            <form>
                            <td class="intro-40-column" align="right" valign="top">{% for aoi in instance.aoi_set %}
                                 <label>{{aoi.name}} <input type="checkbox" name="aois" value="{{aoi.id}}" checked/></label>
                                {% endfor %}
                            </td>
                            </form>
                            <td class="intro-middle-column">
                                &nbsp;
                            </td>
                            </form>
                            <form>
                            <td class="intro-40-column" align="right" valign="top">{% for smp in instance.smp_set %}
                                 <label>{{smp.name}} <input type="checkbox" name="smps" value="{{smp.id}}" checked/></label>
                                {% endfor %}
                            </td>
                            </form>
                            <td class="right-column">
                                &nbsp;
                            </td>
                            </form>
                        {% else %}
                            {% if instance.num_aois > 0 %}
                            <form>
                            <td class="intro-80-column" align="right" valign="top">{% for aoi in instance.aoi_set %}
                                 <label>{{aoi.name}} <input type="checkbox" name="aois" value="{{aoi.id}}" checked/></label>
                                {% endfor %}
                            </td>
                            </form>
                            <td class="intro-middle-column">
                                &nbsp;
                            </td>
                            </form>
                            {% endif %}
                            {% if instance.num_smps > 0 %}
                            <form>
                            <td class="intro-80-column" align="right" valign="top">{% for smp in instance.smp_set %}
                                 <label>{{smp.name}} <input type="checkbox" name="smps" value="{{smp.id}}" checked/></label>
                                {% endfor %}
                            </td>
                            </form>
                            <td class="right-column">
                                &nbsp;
                            </td>
                            </form>
                            {% endif %}
                        {% endif %}
                    </tr>
                </table>
                <p><a id="display_scoring_descriptions" href="javascript:toggleDiv('scoring_descriptions', 'display_scoring_descriptions');">How were my shapes scored?</a></p>
                <div id="scoring_descriptions" class="box" style="display: none">
                    <p>
                    <div class="tabs" style="margin-top:10px;">
                        <ul>
                            <li><a href="#conservation" style="padding-left:5px;padding-right:5px;"><span>Conservation</span></a></li>
                            <li><a href="#tidal_energy" style="padding-left:5px;padding-right:5px;"><span>Tidal Energy</span></a></li>
                            <li><a href="#wave_energy" style="padding-left:5px;padding-right:5px;"><span>Wave Energy</span></a></li>
                            <li><a href="#wind_energy" style="padding-left:5px;padding-right:5px;"><span>Wind Energy</span></a></li>
                        </ul>
                        <div id="conservation">
                            <p>The conservation score represents areas of high conservation value from a regional planning process conducted by The Nature Conservancy and partners. The planning process involved collecting hundreds of spatial data layers on the biodiversity of the Pacific Northwest Marine region from Cape Mendocino in California to Cape Flattery in Washington. 
                            <p>These layers include the following: physical (benthic habitat, canyons, rocky substrate, estuary habitat and substrate, island count and area, upwelling areas) and biological (seabirds, groundfish trawl data, seal and sealion haulouts, snowy plover critical habitat, coral and sponges, Olympia oysters, chlorophyll, kelp, stellar sea lion rookeries and critical habitat, and orca critical habitat). 
                            <p>This information was then compiled into planning units of variable size (about 9 sq.miles offshore and 1 sq.mile nearshore) so that a relative biodiversity conservation value could be assessed. These units were run through a computer optimization program called <a href="http://www.uq.edu.au/marxan/" target="_blank">Marxan</a>, a computer optimization program designed to identify specific places based on spatially-explicit conservation goals. Marxan selects those planning units with the most coincident occurrence of physical and biological features while meets its conservation goals in the smallest possible spatial footprint. The Conservation Score data layer is an aggregate of running the program ten times. Therefore a planning unit with a score of 10 is very important from a conservation perspective while a score of 0 is relatively unimportant. 
                        </div>
                        <div id="tidal_energy">
                            <p>We developed a scoring layer for each type of renewable ocean energy (wind, wave, and tidal) to evaluate a user designed shapes for ocean energy siting. This scoring scale was developed to be compatible with the scoring scale used for conservation, which ranges from 0 to 10, with 0 being least suitable for a particular management objective and 10 being most suitable. These scoring layers were developed for each ocean energy objective based on the following data (listed in order of importance): energy potential, substrate or sediment type, depth range, distance to electrical substations and distance to electrical transmission lines. 
                            <p>We created an incremental scoring scheme that included distance to electrical infrastructure into the development of all of the ocean scoring layers. We created proximity layers that represent distance to substations and distance to transmission lines. We scored a 10 for locations within 5 miles of either substation or transmission lines; the score was decreased 1 point for each additional 4 miles after the initial 5 miles. Energy potential, sediment and depth are unique for each type of ocean energy and they are described in more detail in their individual sections. 
                            <p>The tidal energy scoring layer was developed from the maximum and average tidal current, depth, substrate and distance to substations and to transmission lines. Dr Brian Polagye from the Mechanical Engineering Department at the University of Washington provided guidance on developing the scoring criteria for tidal power, sediment type and depth. We scored a 0 for depth range of 0-66 feet (0-20 meters), a score of 10 for depth range of 66-262 feet (20-80 meters), and depths greater than 262 feet (80 meters), a score of 0. We used the following sediment and bottom substrate scoring scheme: bedrock (island/rock) are excellent substrates and scored 10; consolidated sediments (sand) scored 7; unconsolidated sediments (mud, organics, sand/mud, cobble, gravel, wood/organics) scored 3; deep, unconsolidated sediments (undefined) scored 0. The mean and maximum tidal power layers were scored according to the criteria given below:
                            <table class="center" style="text-align:left;">
                                <tr>
                                    <td><p>&lt; 0.5 kW/m2 - Poor</td><td style="text-align:right;"><p>0</td>
                                </tr>
                                <tr>
                                    <td><p>0.5 - 1 kW/m2 - Fair</td><td style="text-align:right;"><p>3</td>
                                </tr>
                                <tr>
                                    <td><p>1 - 2 kW/m2 - Good</td><td style="text-align:right;"><p>5</td>
                                </tr>
                                <tr>
                                    <td><p>2 - 4 kW/m2 - Excellent</td><td style="text-align:right;"><p>8</td>
                                </tr>
                                <tr>
                                    <td><p>&gt; 4 kW/m2 - Outstanding</td><td style="text-align:right;"><p>10</td>
                                </tr>
                            </table>
                            <p>We combined the individual scoring layers using by weighted each layer according to its importance and then added them together to create a final tidal energy scoring layer. We weighted mean tidal power potential by 0.35, maximum tidal power potential by 0.15, depth and substrate each by 0.2, and distance to substation and distance to transmission lines each by 0.05. We would expect maximum tidal conditions to occur a very small percentage of the time, so it is scored lower than the mean tidal power potential, which represents the average tidal conditions. We also removed any areas that fell below the minimum tidal energy potential threshold since they do not have any economically viable energy potential. 
                        </div>
                        <div id="wave_energy">
                            <p>We developed a scoring layer for each type of renewable ocean energy (wind, wave, and tidal) to evaluate a user designed shapes for ocean energy siting. This scoring scale was developed to be compatible with the scoring scale used for conservation, which ranges from 0 to 10, with 0 being least suitable for a particular management objective and 10 being most suitable. These scoring layers were developed for each ocean energy objective based on the following data (listed in order of importance): energy potential, substrate or sediment type, depth range, distance to electrical substations and distance to electrical transmission lines. 
                            <p>We created an incremental scoring scheme that included distance to electrical infrastructure into the development of all of the ocean scoring layers. We created proximity layers that represent distance to substations and distance to transmission lines. We scored a 10 for locations within 5 miles of either substation or transmission lines; the score was decreased 1 point for each additional 4 miles after the initial 5 miles. Energy potential, sediment and depth are unique for each type of ocean energy and they are described in more detail in their individual sections. 
                            <p>The wave energy scoring layer was developed from the winter and summer wave energy densities, depth, substrate and distance to substations and to transmission lines. The wave energy potential was scored a 10 for summer and winter wave energy densities greater than 10 kW/meter, and scored 0 for those wave energy densities less than 10 kW/meter (Spaulding et al. 2010). Soft and unconsolidated bottom sediments including mud, sand, shell, and gravel were scored as 10 while hard bottom substrates (for example, islands, rock and boulder) were scored a 0. We assigned a depth range of 98-197 feet a score of 10, and those depths less than 98 feet and greater than 197 feet, a score of 0 (Mineral Management Services, 2007).
                            <p>We combined the individual scoring layers using by weighted each layer according to its importance and then added them together to create a final wave energy scoring layer. We weighted winter wave energy density and summer wave energy density each by 0.25, depth and substrate each by 0.2, and distance to substation and distance to transmission lines each by 0.05. We also removed any areas that fell below the minimum energy potential threshold since they do not have any economically viable energy potential. 
                        </div>
                        <div id="wind_energy">
                            <p>We developed a scoring layer for each type of renewable ocean energy (wind, wave, and tidal) to evaluate a user designed shapes for ocean energy siting. This scoring scale was developed to be compatible with the scoring scale used for conservation, which ranges from 0 to 10, with 0 being least suitable for a particular management objective and 10 being most suitable. These scoring layers were developed for each ocean energy objective based on the following data (listed in order of importance): energy potential, substrate or sediment type, depth range, distance to electrical substations and distance to electrical transmission lines. 
                            <p>We created an incremental scoring scheme that included distance to electrical infrastructure into the development of all of the ocean scoring layers. We created proximity layers that represent distance to substations and distance to transmission lines. We scored a 10 for locations within 5 miles of either substation or transmission lines; the score was decreased 1 point for each additional 4 miles after the initial 5 miles. Energy potential, sediment and depth are unique for each type of ocean energy and they are described in more detail in their individual sections. 
                            <p>The wind energy scoring layer was developed from wind speed, depth, substrate and distance to substations and to transmission lines. Principle Power, Inc. provided guidance on developing the scoring criteria for wind speed, sediment type and depth. We assigned a depth range of  less than 98 feet (30 meters) a score of 0, depths from 98-197 feet (30-60 meters) scored 5, and depths greater than 197 feet (60 meters), a score of 10. Soft and unconsolidated bottom sediments including mud, sand, shell, cobble, gravel, organics and fines were scored as 10; hard bottom substrates (for example, rock and boulder) were scored a 0. The wind speed layer was scored according to criteria given below:
                            <table class="center" style="text-align:left;">
                                <tr>
                                    <td><p>&lt; 7 m/s</td><td style="text-align:right;"><p>0</td>
                                </tr>
                                <tr>
                                    <td><p>7 m/s</td><td style="text-align:right;"><p>5</td>
                                </tr>
                                <tr>
                                    <td><p>8 m/s</td><td style="text-align:right;"><p>8</td>
                                </tr>
                                <tr>
                                    <td><p>9 m/s</td><td style="text-align:right;"><p>9</td>
                                </tr>
                                <tr>
                                    <td><p>&gt; 10 m/s</td><td style="text-align:right;"><p>10</td>
                                </tr>
                            </table>
                            <p>We combined the individual scoring layers using by weighted each layer according to its importance and then adding them together to create a final wind energy scoring layer. We weighted wind speed potential by 0.5, depth and substrate each by 0.2, and distance to substation and distance to transmission lines each by 0.05. We also removed any areas that fell below the minimum wind energy potential threshold since they do not have any economically viable energy potential. 
                        </div>
                    </div>
                </div>
            </div>
            
            <div id="visual">
                <div id="Tradeoff_Instructions" class="step">
                    <p>Choose two objectives to be charted in the Tradeoff Analysis Report. &nbsp;
                    <form id="radio">
                        <table>
                            <tr>
                                <td class="left-column">
                                    &nbsp;
                                </td>
                                <td class="obj-column" align="center">
                                    <label class="header">Objective 1</label>
                                </td>
                                <td class="middle-column">
                                    &nbsp;
                                </td>
                                <td class="obj-column" align="center">
                                    <label class="header">Objective 2</label>
                                </td>
                                <td class="right-column">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td class="left-column">
                                    &nbsp;
                                </td>
                                <td class="obj-column">
                                    <label>
                                    <input type="radio" value="Wind Energy" class="x-axis" name="x-axis">Wind Energy
                                    </label>
                                </td>
                                <td class="middle-column">
                                    &nbsp;
                                </td>
                                <td class="right-column">
                                    <label>
                                    <input type="radio" value="Wind Energy" class="y-axis" name="y-axis" checked>Wind Energy
                                    </label>
                                </td>
                                <td width="15%">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td class="left-column">
                                    &nbsp;
                                </td>
                                <td class="obj-column">
                                    <label>
                                    <input type="radio" value="Tidal Energy" class="x-axis" name="x-axis">Tidal Energy
                                    </label>
                                </td>
                                <td class="middle-column">
                                    &nbsp;
                                </td>
                                <td class="right-column">
                                    <label>
                                    <input type="radio" value="Tidal Energy" class="y-axis" name="y-axis">Tidal Energy
                                    </label>
                                </td>
                                <td width="15%">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td class="left-column">
                                    &nbsp;
                                </td>
                                <td class="obj-column">
                                    <label>
                                    <input type="radio" value="Wave Energy" class="x-axis" name="x-axis">Wave Energy
                                    </label>
                                </td>
                                <td class="middle-column">
                                    &nbsp;
                                </td>
                                <td class="right-column">
                                    <label>
                                    <input type="radio" value="Wave Energy" class="y-axis" name="y-axis">Wave Energy
                                    </label>
                                </td>
                                <td width="15%">
                                    &nbsp;
                                </td>
                            </tr>
                            <tr>
                                <td class="left-column">
                                    &nbsp;
                                </td>
                                <td class="obj-column">
                                    <label>
                                    <input type="radio" value="Conservation" class="x-axis" name="x-axis" checked>Conservation
                                    </label>
                                </td>
                                <td class="middle-column">
                                    &nbsp;
                                </td>
                                <td class="right-column">
                                    <label>
                                    <input type="radio" value="Conservation" class="y-axis" name="y-axis">Conservation
                                    </label>
                                </td>
                                <td width="15%">
                                    &nbsp;
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                
                <div id="Tradeoff_Analysis" class="step"></div>
                
                <div class="wizard_nav" style="width:100%">
                    <a href="#" class="button" style="float:left;" onclick="this.blur(); return false;" id="change_objectives"><span>&lt; Change Objectives</span></a>
                    <a href="#" class="button" style="float:right;" onclick="javascript:toggleLegend('toggle_legend'); return false;" id="toggle_legend"><span>Hide Legend</span></a>
                    <a href="#" class="button" style="float:right;" onclick="this.blur(); return false;" id="show_chart"><span>Show Chart &gt;</span></a> 
                </div>
            </div>
            <div id="text">
                <div id="Tradeoff_Table" class="step">
                    <p>coming soon...</p>
                </div>
            </div>
        {% else %}
            <div id="empty">
                </br>
                <p>Your Tradeoff Collection is currently without any Areas of Interest or SMP Characterization Sites.</p>
                <p>Tradeoff reports will become available once the collection has been populated.<p>
            </div>
        {% endif %}
        </div>
        
    </div>
    
<style type="text/css">

label {
    clear: both;
    color: #344E63;
    display: block;
    font-size: 12px;
    font-weight: normal !important;
    margin: 0 0 5px;
    padding: 0;
    text-shadow: 0 1px 0 #FCFAFF;
}
label.header {
    font-weight: bold !important;
}
form input[type="checkbox"] {
    top: 2px !important;
}
table.center {
    margin-left:auto;
    margin-right:auto;
}
td.left-column {
    width: 10%;
}
td.obj-column {
    width: 25%;
}
td.intro-40-column {
    width: 40%;
    align: "right";
    valign: "top";
}
td.inrto-80-column {
    width: 80%;
    align: "right";
    valign: "top";
}
td.intro-middle-column {
    width: 10%;
}
td.middle-column {
    width: 20%;
}
td.right-column {
    width: 10%;
}
td p {
    margin-top:0px !important;
    margin-bottom:0px !important;
}

div .step { 
    -moz-box-shadow: 5px 5px 5px #ddd;
    -webkit-box-shadow: 5px 5px 5px #ddd;
    box-shadow: 5px 5px 5px #ddd; 
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
    border: 1px #ddd solid;
    padding: 6px;
    margin-top: 4px;
    margin-bottom: 8px;
    background-color: white; 
    background-repeat: no-repeat;
    min-height: 54px;
}
div .inputfield { padding-bottom: 14px; }
span.form-image { float: left; margin-left: -66px; }
span.form-image > img { width:46px; height:46px; }
</style>

{% endblock panel %}
